<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>mapbox-gl</title>
    <!-- 引入mapbox样式 -->
    <link href='./js_example/script/mb/mapbox-gl.css' rel='stylesheet' />
    <!-- 引入统一地图平台服务样式 -->
    <link href='./js_example/script/map/map.css' rel='stylesheet' />
    <link href='./js_example/script/map/plot.css' rel='stylesheet' />
    <style>
        html,
        body,
        #map {
            width: 100%;
            height: 100%;
        }
        
        html,
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <button type="button" onclick="d1()" style="position: absolute;top: 10px;right: 290px;">圆</button>
    <button type="button" onclick="d2()" style="position: absolute;top: 10px;right: 245px;">椭圆</button>
    <button type="button" onclick="d3()" style="position: absolute;top: 10px;right: 200px;">弓形</button>
    <button type="button" onclick="d4()" style="position: absolute;top: 10px;right: 155px;">扇形</button>
    <button type="button" onclick="d5()" style="position: absolute;top: 10px;right: 100px;">曲线面</button>
    <button type="button" onclick="d6()" style="position: absolute;top: 10px;right: 55px;">弧线</button>
    <button type="button" onclick="d7()" style="position: absolute;top: 10px;right: 10px;">曲线</button>

    <!-- 引入mapbox脚本 -->
    <script src='./js_example/script/mb/mapbox-gl.js'></script>
    <script src='./js_example/script/mb/mapbox-gl-language.js'></script>

    <!-- 引入统一地图平台服务脚本 -->
    <script src="./js_example/script/map/map.min.js"></script>
    <script src="./js_example/script/map/plot.min.js"></script>
    <script src="./js_example/script/map/axios.min.js"></script>
    <script>
        var pt = null;
        axios.AxiosService.init();
        //基础地址配置
        map.MineConfigService.initParam('http://172.16.10.38');
        map.MineConfigService.accessToken = '4848b06b88024822b118fc3e53460e04';
        // 初始地图对象
        var p = new map.MapService('EPSG:4326', 'EPSG:3857', true, {
            xmin: 73.092204,
            ymin: 3.079711,
            xmax: 135.9338915,
            ymax: 53.943712
        }, 'mapboxgl'); // mapboxgl:使用mapbox底图，ol:使用OpenLayers为底图
        p.on('MapInit', function() { // 注册地图加载完成事件
            pt = new plot.PlottingService(p);
        });
        // 初始化地图
        p.initMap('map', null, {
            projection: 'EPSG:4326',
            center: center,
            zoom: 10,
            maxZoom: 19,
            minZoom: 1,
            attributionControl: false,
            style: 'http://172.16.10.38/service/solu/style/id/4643'
        });

        function d1() {
            pt.draw('draw_circle');
        }

        function d2() {
            pt.draw('draw_ellipse');
        }

        function d3() {
            pt.draw('draw_lune');
        }

        function d4() {
            pt.draw('draw_sector');
        }

        function d5() {
            pt.draw('draw_closed_curve');
        }

        function d6() {
            pt.draw('draw_arc');
        }

        function d7() {
            pt.draw('draw_curve');
        }
    </script>
</body>

</html>